<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
  <hr />
  <h2>{{ a }}</h2>
  <h2>测试：{{ c }}</h2>
</template>

<script lang="ts">
export default {
  name: 'Person', // 组件名

  beforeCreate() {
    console.log('钩子函数')
  },

  data() {
    // 同时兼容 | 但是不建议
    return {
      a: '11',
      c: this.name, // 读取得到 setup 中的数据
    }
  },

  setup() {
    /* 
      vue3 开始弱化 this
      setup 中的 this 是 undefine
      
      读取不到 data 中的数据 |> this 不存在
        => 可以共存 | 新的 <=read= 旧的
    */
    let name = '张三'
    let age = 18
    let tel = '111111'

    function showTel() {
      alert(tel)
    }
    function changeName() {
      name = 'ddd' // 直接修改是无效的 | 无法做到响应式
    }
    function changeAge() {
      age = 11
    }

    return {
      showTel,
      changeName,
      changeAge,
      name,
      age,
      tel,
    }
  },
}
</script>

<style scoped>
.person {
  background-color: #2bc7bd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  /* 上下为0 左右为5 */
  margin: 0 5px;
}
</style>
